<template>
  <div class="uploadimgbox">
    <img
      class="imgbox"
      :style="{ width: widthstyle, height: widthstyle }"
      :src="imgurllist"
    />
    <el-upload
      class="centerImg"
      :class="{ hide: hideUploadIcon }"
      :action="' '"
      list-type="picture-card"
      :on-preview="handlePictureCardPreviewIcon"
      :on-remove="handleRemoveIcon"
      :auto-upload="false"
      :limit="1"
      :on-change="beforeAvatarUpload"
      ref="uploadicon"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- <div class="imgbtn">
      <el-button type="primary" @click="uploadimg()">提 交</el-button>
      <el-button @click="iconDialogVisible = false">取 消</el-button>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { changuserimg } from "../../request/user";
import { organaupload } from "../../request/orgnization";
import type { UploadProps } from "element-plus";
const props = defineProps({
  imgurllist: {
    type: String,
    default: "/api/static/default/default.png",
  },
  widthstyle: {
    // type:Intl,
    default: 50,
  },
  userid: {
    type: String,
  },
  uploadtype: {
    type: String,
  },
});
watch(
  () => props,
  (newVal, oldVal) => {
    console.log("监听基本类型数据testStr");
    console.log("new", newVal);
    console.log("old", oldVal);
  }
);

onMounted(() => {
  console.log(props);
});

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);

  console.log(uploadFile);

  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  console.log("rawFile.raw", rawFile.raw.type);
  console.log(rawFile);
  const fileTypes = ["image/jpeg", "image/png", "image/jpg"];
  if (!fileTypes.includes(rawFile.raw.type)) {
    ElMessage.error("图片格式必须为ipeg或者png格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能超过2MB");
    return false;
  } else {
    imageUrl.value = rawFile.raw;
    console.log("imageUrl.value", imageUrl.value);
    return true;
  }
};

const handleChange = (file: any, fileList: any) => {
  imageUrl.value = file;
};

const uploadimg = async () => {
  const formData = new FormData();
  formData.append("file", imageUrl.value);
  formData.append("id", props.userid);
  if (props.uploadtype == "fmlogo") {
    if (formData.get("file")) {
      // var id = props.userid
      await organaupload(formData)
        .then((res) => {
          // console.log(formData.get("file"));
          // ElMessage({
          //   message: "上传成功",
          //   type: "success",
          // });
        })
        .catch((e) => {
          console.log(e);
          ElMessage({
            message: "上传失败",
            type: "error",
          });
        });
      }
      return true;
    } else {
      if (formData.get("file")) {
        await changuserimg(formData).then((res) => {
          // console.log(formData.get("file"));
          // ElMessage({
          //   message: "上传成功",
          //   type: "success",
          formData.delete("file")
          // });
        });
        
        console.log(formData.get("file"));
        return true;
      }
    }
};

defineExpose({
  uploadimg,
});
</script>

<style lang="scss" scoped>
.uploadimgbox {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 315px;
  height: 110px;
  // background-color: antiquewhite;
  margin-bottom: 30px;
  .imgbox {
    width: 120px;
    height: 100%;
    object-fit: cover;
  }
  .imgbtn {
    float: left;
    align-items: center;
    // display: flex;
    // flex-direction: row;

    // justify-content: space-around;
    // float: left;
  }
  :deep(.el-button + .el-button) {
    margin-left: 0px;
  }
  :deep(.el-upload) {
    width: 110px;
    height: 110px;

    // background-color: rgba(109, 68, 64, 0.3);
  }
  // .centerImg{
  //   width: 120px;
  //   height: 120px;
  // }

  .avatar-uploader .avatar {
    width: 100%;
    height: 178px;
    display: block;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 18px;
    color: #2b466c;
    width: 178px;
    height: 178px;
    text-align: center;
    display: block;
    flex-direction: column;
    justify-content: center;
    padding-top: 40%;
  }
}
</style>
